<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>List Drag and Drop</title>

	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
	<link rel="stylesheet" type="text/css" href="./styles/List.css">
</head>

<body class="list1auto">
	<ui5-checkbox id="reorder" text="Movable items" checked></ui5-checkbox>
	<ui5-checkbox id="density" text="Compact density"></ui5-checkbox>

	<section>
		<h2>Drag and drop</h2>
		<ui5-list id="listDnd1" header-text="List 1">
			<ui5-li id="bg1" movable>1. Bulgaria</ui5-li>
			<ui5-li id="de1" movable>1. Germany</ui5-li>
			<ui5-li id="es1" movable>1. Spain</ui5-li>
		</ui5-list>
	</section>

	<section class="largeTopMargin">
		<ui5-list id="listDnd2" header-text="List 2">
			<ui5-li id="bg2" movable>2. Bulgaria</ui5-li>
			<ui5-li id="de2" movable data-allows-nesting>2. Germany (Allows nesting)</ui5-li>
			<ui5-li id="es2" movable>2. Spain</ui5-li>
		</ui5-list>
	</section>

	<section class="largeTopMargin">
		<ui5-list id="listDnd3" header-text="List 3 with Fixed Items">
			<ui5-li id="item1" data-fixed="true">Item 1 (fixed)</ui5-li>
			<ui5-li id="item2" data-fixed="true">Item 2 (fixed)</ui5-li>
			<ui5-li id="item3" data-fixed="true">Item 3 (fixed)</ui5-li>
			<ui5-li id="item4" movable>Item 4</ui5-li>
			<ui5-li id="item5" movable>Item 5</ui5-li>
			<ui5-li id="item6" movable>Item 6</ui5-li>
			<ui5-li id="item7" movable>Item 7</ui5-li>
			<ui5-li id="item8" movable>Item 8</ui5-li>
			<ui5-li id="item9" movable>Item 9</ui5-li>
		</ui5-list>
	</section>

	<script>
		const list1 = document.getElementById("listDnd1");
		const list2 = document.getElementById("listDnd2");
		const list3 = document.getElementById("listDnd3");
		const handleBeforeItemMove = (e) => {
			const { destination, source } = e.detail;

			if (destination.placement === "Before" || destination.placement === "After") {
				e.preventDefault();
			}

			if (destination.placement === "On" && "allowsNesting" in destination.element.dataset) {
				e.preventDefault();
			}

			console.log(`Moving "${source.element.id}" ${destination.placement.toLowerCase()} "${destination.element.id}"`);
		};

		const list1HandleMoveOver = (e) => {
			const { destination, source } = e.detail;

			if (!list1.contains(source.element) && !list2.contains(source.element)) {
				return;
			}

			handleBeforeItemMove(e);
		};

		const list2HandleMoveOver = (e) => {
			handleBeforeItemMove(e);
		};

		const list3HandleMoveOver = (e) => {
			const { destination, source } = e.detail;

			if (destination.element.dataset.fixed) {
				return;
			}

			handleBeforeItemMove(e);
		};

		const handleMove = (e) => {
			const { destination, source } = e.detail;

			switch (destination.placement) {
			case "Before":
				destination.element.before(source.element);
				break;
			case "After":
				destination.element.after(source.element);
				break;
			case "On":
				destination.element.prepend(source.element);
				break;
			}
		};

		list1.addEventListener("ui5-move-over", list1HandleMoveOver);
		list1.addEventListener("ui5-move", handleMove);
		list2.addEventListener("ui5-move-over", list2HandleMoveOver);
		list2.addEventListener("ui5-move", handleMove);
		list3.addEventListener("ui5-move-over", list3HandleMoveOver);
		list3.addEventListener("ui5-move", handleMove);

		const densityCb = document.getElementById("density");
		densityCb.addEventListener("ui5-change", e => {
			document.body.classList.toggle("ui5-content-density-compact", e.target.checked);
		});

		const reorderCb = document.getElementById("reorder");
		reorderCb.addEventListener("ui5-change", e => {
			list1.items.forEach((item) => item.movable = e.target.checked);
			list2.items.forEach((item) => item.movable = e.target.checked);
			list3.items.forEach((item) => item.movable = e.target.checked);
		});
	</script>
</body>

</html>